<template>
  <div class="city">
    <div class="top">
      <van-search
        shape="round"
        v-model="searchValue"
        show-action
        placeholder="城市/区域/位置"
        @cancel="onCancel"
      />
      <van-tabs v-model:active="TabActive">
        <van-tab
          v-for="(value, key) in allCitys"
          :key="key"
          :title="value.title"
          :name="key"
        >
        </van-tab>
      </van-tabs>
    </div>
    <div class="content">  
    <div v-for="value,key in allCitys" :key="key">
        <CityList :cityData="value.cities" :hotCities="allCitys[TabActive]?.hotCities"  v-show="key===TabActive"></CityList>
    </div>
    </div>
  </div>
</template>


<script setup>
import { storeToRefs } from "pinia";
import { computed, ref, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import getAllCity from "../../../services/modules/city";
import useCityStore from "../../../stores/modules/cityStore";
import CityList from './CityList.vue'

const searchValue = ref("");
const TabActive = ref(0);
const router = useRouter();
function onCancel() {
  router.back();
}

// //普通的获取数据
// const allCitys = ref({});
// getAllCity().then((res) => {
//   allCitys.value = res.data;
// });

//获取pinia库内部的数据：要使用watch进行监听
const cityStore = useCityStore();
cityStore.getAllCitys();
const allCitys = ref({});

watch(() => cityStore.allCitys, (newData)=>{
   allCitys.value =newData
})



//获取城市数据
const currentGroup = computed(() => allCitys.value[TabActive.value]?.cities);
 
</script>


<style lang="less" scoped>
//设置局部滚动
.city {
  .top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .content {
    margin-top: 98px;
    height: calc(100vh-98px);
    overflow-y: auto;
  }
}
</style>